<template>
	<view id="app">
		<view class="container">
			<uv-search :showAction="false" placeholder="请输入搜索内容" v-model="keyword" :clearabled="true" bgColor="#ffffff" @search="reload()"></uv-search>
		</view>
		<view class="container">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" interval="3000" indicator-active-color="#145cfe" indicator-color="#aaa"
							duration="500">
				<swiper-item v-for="(item,index) in swiper" :key="index">
					<view class="swiper-item">
						<image :src="item.image"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="ptb20 plr15 f36 fw5">线上课程</view>
		<view class="list">
			<uv-grid col="2">
				<uv-grid-item v-for="(item,index) in list" :key="index">
					<view class="item bgw oh">
						<view class="item-top" @click="handle('member/course/detail?id='+item.id)">
							<image :src="item.thumb"></image>
						</view>
						<view class="f32 thd">{{item.title}}</view>
						<view class="df mt20">
							<view class="f1 df f30 c666 plr10 ptb10">{{item.read}}人看过</view>
							<view class="w120 bd1s brc9 c666 f26 tac br15 ptb10 plr15"
								@click="handle('member/course/detail?id='+item.id)">立即学习</view>
						</view>
					</view>
				</uv-grid-item>
			</uv-grid>
		</view>
		<uv-load-more status="nomore" v-if="!more"/>
		<uv-empty v-if="!nodata"></uv-empty>
		<view class="wh80"></view>
		<uv-tabbar :value="1" iconSize="50rpx" activeColor="#00a0e8" inactiveColor="#9ea09f" zIndex="1000">
			<uv-tabbar-item text="首页" @click="reLaunch()">
				<template v-slot:active-icon>
					<image class="wh50" :src="memberSelected"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="wh50" :src="memberSelecte"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="课程" icon="grid"></uv-tabbar-item>
			<uv-tabbar-item text="消息" icon="chat" @click="redirect('member/message/message',true)"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account" @click="redirect('member/mine/mine',true)"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				keyword:'',
				memberSelected: this.util.config.host + '/static/images/homed.png',
				memberSelecte: this.util.config.host + '/static/images/home.png',
				swiper: [],
				list:[],
				page:1,
				more:true,
				nodata:true,
			}
		},
		onLoad(){
			that = this;
			this.Banner();
		},
		onShow(){
			that.reLoad();
		},
		onReachBottom(){
			if(that.more == false){
				return false;
			}
			that.getList();
		},
		methods: {
			reLoad() {
				// 格式化页码
				that.page = 1
				that.list = []
				that.more = true
				that.nodata = true
				// 获取产品列表
				that.getList();
			},
			getList:function(){
				let page = that.page
				let keyword = that.keyword;
				that.request({
					url:'/api/course/csearch',
					data:{
						keyword:keyword,
						page:page
					},
					load:1,
					success:function(res){
					if(res.code == 200){
						if(page == 1){
							that.list = res.data;
							if(res.data.length == 0){
								that.nodata=false;
							}
						}else{
							that.list.push(...res.data)
						}
						that.more = res.data.length < 10 ? false : true;
						that.page=page+1;
					}
				}})
			},
			Banner: function() {
				let that = this;
				that.request({
					url: '/api/index/banner',
					data: {
						type: 'courseSwiper'
					},
					success: function(res) {
						if (res.code == '200') {						
							that.swiper = res.data;
						}
					},
				});
			},
			handle:function(e){
				uni.navigateTo({
					url:"/pages/"+e,
				})
			},
			redirect:function(e,isLogin=false){
				if(isLogin == true){
					if(!uni.getStorageSync('QLXG_token')){
						uni.navigateTo({
							url:"/pages/member/index/login"
						})
						return false;
					}
				}
				uni.redirectTo({
					url:"/pages/"+e,
				})
			},
			reLaunch:function(){
				uni.reLaunch({
					url:"/pages/index/index",
				})
			}
		}
	}
</script>

<style  lang="less" scoped>
		.swiper {
				height: 300rpx;width:100%;
			}
		.swiper-item {
			display: block;border-radius: 15rpx;overflow: hidden;
			height: 300rpx;
			image{border-radius: 15rpx;}
		}
	.list{ 
		padding:30rpx 15rpx 15rpx 15rpx;
		.item{
		 margin-bottom: 30rpx;display: flex; flex-direction: column;margin-right: 10rpx; float: left;width:350rpx;
		.item-top{width:100%;height:210rpx;margin-bottom: 20rpx; image{border-radius:15rpx 15rpx 0 0 ;}}
		.item-title{font-size: 26rpx;font-weight: 400;padding:8rpx 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
		.item-desc{font-size: 22rpx;color:#9c9c9c;text-align: center;border-radius: 15rpx;padding:8rpx 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}	
		}
	}
	
</style>
